<template>
  <div class="container">
    <div>
      <h3 v-bubbling class="bubbling-text">The hope of the village</h3>
    </div>
    <n-icon
      class="arrow-down-btn"
      @click="scrollToContext"
      size="50"
      color="#fff"
    >
      <ArrowDownCircleSharp />
    </n-icon>
  </div>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>1</h3>
  <h3>3</h3>
</template>
<script>
import { ArrowDownCircleSharp } from "@vicons/ionicons5";

import { defineComponent, onMounted } from "vue";
export default defineComponent({
  setup() {
    const scrollToContext = () => {
      const domWraper = document.querySelector(".content");
      domWraper.scrollTo({
        top: domWraper.scrollHeight,
        behavior: "smooth",
      });
    };
    return {
      scrollToContext,
    };
  },
  components: { ArrowDownCircleSharp },
});
</script>

<style lang='scss' scoped>
@import url("https://fonts.googleapis.com/css?family=Bubblegum+Sans&display=swap");
.container {
  height: 100%;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  backdrop-filter: blur(2px);
  text-shadow: 0px 0px 18px rgb(4, 3, 70);
  .bubbling-text {
    font-family: "Bubblegum Sans", cursive;
    font-size: 3rem;
    font-weight: bolder;
    text-align: center;
    color: #fff;
  }
  @keyframes upAndDown {
    0% {
      transform: translateY(-5px);
    }
    100% {
      transform: translateY(5px);
    }
  }
  .arrow-down-btn {
    cursor: pointer;
    animation: upAndDown 0.9s ease-in-out infinite alternate;
  }
  &::-webkit-scrollbar {
    width: 0px;
    background: #fff;
  }
}
</style>